<template>
  <div>
    <!-- 位置栏 -->
    <div class="location-bar">
      <div>位置 :&ensp;</div>
      <div style="color: #000">资源列表</div>
    </div>
    <!-- 查询框 -->
    <div class="search-bar">
      <a-form-model layout="inline" :model="searchForm" @submit="searchSubmit" @submit.native.prevent>
        <a-form-model-item label="标题:">
          <a-input v-model="searchForm.title" placeholder="请输入" />
        </a-form-model-item>
        <a-form-model-item label="所属栏目">
          <a-select show-search placeholder="请选择" style="width: 150px" v-model="searchForm.sectionId">
            <a-select-option v-for="(col, index) in column" :key="index" :value="col.id">
              {{ col.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- 内容框 -->
    <div class="content-box">
      <!-- 新增 -->
      <a-button type="primary" @click="add_modal"> 新增 </a-button>
      <!-- 表格 -->
      <a-table
        :columns="columns"
        :data-source="data"
        @change="handleTableChange"
        :pagination="pagination"
        :rowKey="(columns) => columns.id"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <span slot="sectionId" slot-scope="text">
          <template v-for="(col, index) in column">
            <span v-if="col.id == text ? true : false" :key="index">{{ col.title }}</span>
          </template>
          <!-- {{text}} -->
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="modify_modal(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="del(record)"> 删除 </a>
        </span>
      </a-table>
      <!-- 弹窗编辑表单 -->
      <!-- 新增表单 -->
      <a-modal :visible="add_visible" title="新增资源" okText="确认" cancel-text="取消" @ok="add_ok" @cancel="add_cancel">
        <a-form-model :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }" :rules="rules" ref="addForm">
          <a-form-model-item label="标题" prop="title">
            <a-input v-model="form.title" />
          </a-form-model-item>
          <a-form-model-item label="所属栏目" prop="sectionId">
            <a-select show-search placeholder="请选择" v-model="form.sectionId">
              <a-select-option v-for="(col, index) in column" :key="index" :value="col.id">
                {{ col.title }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="资源格式">
            <a-radio-group v-model="form.choice">
              <a-radio value="附件">文件附件</a-radio>
              <a-radio value="链接">网盘链接</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="上传附件" prop="cover" v-if="form.choice == '附件' ? true : false">
            <upload-widget v-model="form.cover"></upload-widget>
          </a-form-model-item>
          <a-form-model-item label="标题" prop="titles" v-if="form.choice == '链接' ? true : false">
            <a-input v-model="form.titles" />
          </a-form-model-item>
          <a-form-model-item label="链接" prop="link" v-if="form.choice == '链接' ? true : false">
            <a-input v-model="form.link" />
          </a-form-model-item>
          <a-form-model-item label="提取码" prop="fetchCode" v-if="form.choice == '链接' ? true : false">
            <a-input v-model="form.fetchCode" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
      <!-- 编辑表单 -->
      <a-modal :visible="edit_visible" title="编辑资源" okText="确认" cancel-text="取消" @ok="edit_ok" @cancel="edit_cancel">
        <a-form-model :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }" :rules="rules" ref="editForm">
          <a-form-model-item label="标题" prop="title">
            <a-input v-model="form.title" />
          </a-form-model-item>
          <a-form-model-item label="所属栏目" prop="sectionId">
            <a-select show-search placeholder="请选择" v-model="form.sectionId">
              <a-select-option v-for="(col, index) in column" :key="index" :value="col.id">
                {{ col.title }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="资源格式">
            <a-radio-group v-model="form.choice">
              <a-radio value="附件">文件附件</a-radio>
              <a-radio value="链接">网盘链接</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="上传附件" prop="cover" v-if="form.choice == '附件' ? true : false">
            <upload-widget v-model="form.cover"></upload-widget>
          </a-form-model-item>
          <a-form-model-item label="标题" prop="titles" v-if="form.choice == '链接' ? true : false">
            <a-input v-model="form.titles" />
          </a-form-model-item>
          <a-form-model-item label="链接" prop="link" v-if="form.choice == '链接' ? true : false">
            <a-input v-model="form.link" />
          </a-form-model-item>
          <a-form-model-item label="提取码" prop="fetchCode" v-if="form.choice == '链接' ? true : false">
            <a-input v-model="form.fetchCode" />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
      <!-- 弹窗 -->
      <a-modal v-model="del_visible" title="删除确认" @ok="dele_ok">
        <p>确认删除"{{ del_param.title }}"吗？</p>
      </a-modal>
    </div>
  </div>
</template>

<script>
/**表头信息 */
const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
    scopedSlots: { customRender: 'id' },
  },
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title_',
    scopedSlots: { customRender: 'title_' },
  },
  {
    title: '所属栏目',
    dataIndex: 'sectionId',
    key: 'sectionId',
    scopedSlots: { customRender: 'sectionId' },
  },
  {
    title: '创建时间',
    key: 'created',
    dataIndex: 'created',
    scopedSlots: { customRender: 'created' },
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
  },
];
export default {
  data() {
    return {
      columns,
      data: [],
      column: [], //一级目录
      searchForm: { title: '', sectionId: undefined }, //查询参数
      pagination: { pageSize: 10, total: 100, pageNum: 1, showSizeChanger: true }, //分页参数
      selectedRowKeys: [], //多选id
      form: {
        id: '',
        sectionId: undefined,
        title: '',
        choice: '附件', //选择类型
        cover: '',
        titles: '',
        link: '',
        fetchCode: '',
      },
      del_param: { id: '', title: '' }, //删除参数
      add_visible: false,
      edit_visible: false,
      del_visible: false,
      rules: {
        title: [{ required: true, message: '请输入内容!', trigger: 'blur' }],
        sectionId: [{ required: true, message: '请选择栏目!', trigger: 'change' }],
        resourceLink: [{ required: true, message: '请上传图片!', trigger: 'blur' }],
        titles: [{ required: true, message: '请输入内容!', trigger: 'blur' }],
        link: [{ required: true, message: '请输入内容!', trigger: 'blur' }],
        cover: [{ required: true, message: '请输入内容!', trigger: 'blur' }],
        fetchCode: [{ required: true, message: '请输入内容!', trigger: 'blur' }],
      },
    };
  },
  created() {
    this.getColumn();
    this.loadArticleList();
  },
  methods: {
    //读取一级栏目
    async getColumn() {
      let reqData = {};
      let getListUrl = `/section/list`;
      let result = await this.axios.get(getListUrl, reqData);
      this.column = result.data.data;
      console.log(this.column);
    },
    //读取文章列表
    async loadArticleList() {
      let reqData = { sectionId: this.searchForm.sectionId, title: this.searchForm.title };
      let reqParam = { pageNumber: this.pagination.pageNum, pageSize: this.pagination.pageSize };
      let searchUrl = `/resource/search/${reqParam.pageNumber}/${reqParam.pageSize}`;
      let result = await this.axios.post(searchUrl, reqData);
      //   console.log(result);
      this.data = result.data.data;
      this.pagination.total = result.data.total; //总数
      console.log(this.data);
      this.search_empty();
    },
    //新增
    async newlyAdded() {
      let reqData = {
        accessories: [{ path: this.form.cover, fileName: '' }],
        sectionId: this.form.sectionId,
        resourceLink: { fetchCode: this.form.fetchCode, linkAddress: this.form.link, title: this.form.titles },
        title: this.form.title,
        type: this.form.choice,
      };
      let saveUrl = `/resource/save`;
      let result = await this.axios.post(saveUrl, reqData);
      console.log(result);
      this.loadArticleList();
      this.empty_form();
    },
    //编辑
    async modifyList() {
      let reqData = {
        accessories: [{ path: this.form.cover, fileName: '' }],
        sectionId: this.form.sectionId,
        resourceLink: { fetchCode: this.form.fetchCode, linkAddress: this.form.link, title: this.form.titles },
        title: this.form.title,
        type: this.form.choice,
        id: this.form.id,
      };
      let updateUrl = `/resource/update`;
      let result = await this.axios.post(updateUrl, reqData);
      console.log(result);
      this.loadArticleList();
      this.empty_form();
    },
    //删除
    async deleteList() {
      let reqData = {};
      let reqParam = { id: this.del_param.id };
      let deleteUrl = `/resource/delete/${reqParam.id}`;
      let result = await this.axios.delete(deleteUrl, reqData);
      console.log(result);
      this.loadArticleList();
    },

    //搜索
    searchSubmit() {
      //   console.log(this.searchForm);
      this.loadArticleList();
    },
    //新增
    add_modal() {
      this.add_visible = true;
    },
    //编辑
    modify_modal(record) {
      this.edit_visible = true;
      console.log(record);
      this.form.id = record.id;
      this.form.sectionId = record.sectionId;
      this.form.title = record.title;
      this.form.choice = record.type;
    },
    //删除
    del(record) {
      this.del_param.id = record.id;
      this.del_param.title = record.title;
      // console.log(record);
      this.del_visible = true;
    },
    //删除确认
    dele_ok() {
      this.del_visible = false;
      this.deleteList();
    },
    //分页
    handleTableChange(pagination) {
      this.pagination.pageNum = pagination.current;
      this.loadArticleList();
    },
    //添加取消
    add_cancel() {
      this.add_visible = false;
      this.empty_form();
    },
    //添加确认
    add_ok() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          console.log(this.form);
          this.add_visible = false;
          this.newlyAdded();
        }
      });
    },
    //编辑取消
    edit_cancel() {
      this.edit_visible = false;
      this.empty_form();
    },
    //编辑确认
    edit_ok() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          console.log(this.form);
          this.edit_visible = false;
          this.modifyList();
        }
      });
    },
    //清空form单
    empty_form() {
      this.form.title = '';
      this.form.sectionId = undefined;
      this.form.choice = '附件';
      this.form.cover = '';
      this.form.titles = '';
      this.form.link = '';
      this.form.fetchCode = '';
    },
    //清空搜索参数
    search_empty() {
      this.searchForm.title = '';
      this.searchForm.sectionId = undefined;
    },
    //多选
    onSelectChange(selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
  },
};
</script>

<style>
.location-bar {
  display: flex;
  font-size: 14px;
  color: #88898b;
}
.search-bar {
  width: 100%;
  height: 80px;
  background-color: #ffffff;
  margin-top: 17px;
  box-sizing: border-box;
  padding: 20px 30px;
}
.content-box {
  width: 100%;
  background-color: #ffffff;
  margin-top: 20px;
  box-sizing: border-box;
  padding: 20px 30px;
}
</style>